<template>
	<view style="padding: 5%;height: 100vh;">
		<view>
			<u-form :model="form" class="bg-white ivu-form-item-label " label-width="130rpx">
				<u-form-item style="color: white;"  >
					<view style="font-weight: bold;font-size: large;" class="u-skeleton-rect">
						斯沃德餐厅，欢迎您！
					</view>
				</u-form-item>
				<u-form-item label="时间:" left-icon="clock" class="u-skeleton-rect">
					<view style="width: 100%;display: flex;">
					<!-- 	<u-button  size="mini" style="margin-left: 30rpx;" @click="showCalender(0,9)" :type="btCheck===0?'warning':''">早餐</u-button>
						<u-button  size="mini" style="margin-left: 30rpx;" :type="btCheck===1?'warning':''"  @click="showCalender(1,12)">中餐</u-button>
						<u-button  size="mini" style="margin-left: 30rpx;" :type="btCheck===2?'warning':''" @click="showCalender(2,18)">晚餐</u-button>
						<u-button  size="mini" style="margin-left: 30rpx;" :type="btCheck===3?'warning':''" @click="showCalender(3,23)">夜宵</u-button> -->
						<view style="flex:1;text-align:right">
							<u-button  size="mini"  @click="showCalender(0,9)" :type="btCheck===0?'warning':''">早餐</u-button>
						</view>
						<view style="flex:1;text-align:right">
							<u-button  size="mini" :type="btCheck===1?'warning':''"  @click="showCalender(1,12)">中餐</u-button>
						</view>
						<view style="flex:1;text-align:right">
							<u-button  size="mini" :type="btCheck===2?'warning':''" @click="showCalender(2,18)">晚餐</u-button>
						</view>
						<view style="flex:1;text-align:right">
							<u-button  size="mini" :type="btCheck===3?'warning':''" @click="showCalender(3,23)">夜宵</u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="人数:" left-icon="man-add" class="u-skeleton-rect">
					<view style="display: flex;width: 100%;">
						<view style="flex: 1;">
							
						</view>
						<!-- <u-number-box v-model="form.num" :min="1" :max="100" /> -->
						<view style="flex: 1;text-align: right;">
							<u-button @click="numberPicker = true"  type="warning" :plain="form.num === 0" size="mini">
								{{ form.num === 0  ? '请选择用餐人数': (form.num+'人就餐') }}
							</u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="桌型:" left-icon="map" class="u-skeleton-rect" >
<!-- 					<u-radio-group v-model="form.place" size="40" active-color="#ff9900">
						<u-radio v-for="(item, index) in placeList" :key="index" :name="item.id" :disabled="item.disabled">
							{{item.place}}
						</u-radio>
					</u-radio-group> -->
					<view style="display: flex;width: 100%;">
						<view v-for="(item,index) in placeList" :key="index" style="text-align: right;flex: 1;">
							<u-button  size="mini"  :type="item.id === form.place ? 'warning':''"   @click="placeClick(item.id)">
								{{item.place}}
							</u-button>
						</view>
						<view v-if="placeList.length <= 4" v-for="(item,index) in ( 4 - placeList.length )" :key="index" style="text-align: right;flex: 1;">
							
						</view>
						<!-- <u-button  size="mini" v-for="(item, index) in placeList" :key="index" 
							style="margin-left: 30rpx;" :type="item.id === form.place ? 'warning':''"   @click="placeClick(item.id)">
							{{item.place}}
						</u-button> -->
					</view>
				</u-form-item>
				<u-form-item label="口味:" left-icon="tags" class="u-skeleton-rect">
					<!-- <u-radio-group v-model="form.flavor" size="40" active-color="#ff9900">
						<u-radio v-for="(item, index) in flavorList" :key="index" :name="item.id" :disabled="item.disabled">
							{{item.flavor}}
						</u-radio>
					</u-radio-group> -->
					<view style="width: 100%;display: flex;">
						<view style="flex: 1;text-align: right;" v-for="(item, index) in flavorList" :key="index">
							<u-button  size="mini"  :type="item.id === form.flavor ? 'warning':''"  
								 @click="flavorClick(item.id)">{{item.flavor}} </u-button>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="备注:" left-icon="edit-pen" class="u-skeleton-rect">
					<u-input v-model="form.remark" clearable placeholder="请输入内容" />
				</u-form-item>
			</u-form>
			<view style="padding-top: 100rpx;" class="u-skeleton-rect">
				<!-- <u-button type="primary" ripple :custom-style="customStyle" @click="confirm">确认</u-button> -->
				<u-button type="warning" ripple :custom-style="customStyle" @click="confirm">确认</u-button>
			</view>
		</view>
		<u-picker mode="multiSelector" :default-selector='rangeSelect' v-model="calendar" :range="rangeDate" 
					confirm-color="#ff9900" @confirm="dateCheck" @cancel="calendar=false" />
		<u-modal v-model="dialogShow" title="已有点餐" :show-confirm-button="false" mask-close-able width="95%" confirm-color="black"
		 :title-style="{fontWeight: 'bold',marginBottom:'5px',marginTop:'-15px',letterSpacing:'5px'}" :zoom="false">
			<scroll-view style="height: 800rpx;background-color: rgb(244,244,244);" scroll-y>
				<u-card v-for="(item,index) in orderDeatil" :title="item.user.wxName" :sub-title="item.mealTime + ' ' + item.mealType" :thumb="item.user.picture"
				 thumb-width="60" :key="index" thumb-circle @click="navigateToDetail(item.id)">
					<view slot="body">
						<view>
							<view style="display: flex;">
								<view style="flex: 1;">
									<u-lazy-load border-radius="20" :image="imgUrl + item.foods[0].picture" style="height: 170rpx"></u-lazy-load>
									<view style="text-align: center;">{{item.foods[0].name}}</view>
								</view>
								<view style="flex: 1;margin-left: 5rpx;" v-if="item.foods.length > 1">
									<u-lazy-load border-radius="20" :image="imgUrl + 'ys-' + item.foods[1].picture"></u-lazy-load>
									<view style="text-align: center;">{{item.foods[1].name}}</view>
								</view>
								<view style="flex: 2;display: flex;margin-left: 5rpx;">
									<view style="margin: auto 0;flex: 1;">
										<view style="text-align: right;">{{item.num}}人就餐 共{{item.sum}}道菜</view>
										<view style="text-align: right;">{{item.place.place}} {{item.flavor.flavor}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view slot="foot">
						<u-row gutter="16">
							<u-col span="12">
								<view style="float: right;">
									<u-button type="info" size="mini" :custom-style="customBtStyle" @click="navigateToDetail(item.id)">
										已点菜品</u-button>
									<u-button type="warning" size="mini" :custom-style="customBtStyle" style="margin-left: 20rpx;" @click="addMealMethod(item)">
										为此桌加菜</u-button>
								</view>
							</u-col>
						</u-row>
					</view>
				</u-card>
			</scroll-view>
			<view style="text-align: center;padding:2%;">
				<u-button type="warning" @click="dialogShow = false">再来一桌</u-button>
			</view>

		</u-modal>
		<!-- <navigator open-type="exit" target="miniProgram">退出程序</navigator> -->
		<u-picker v-model="numberPicker" mode="selector" :range="numberRange" confirm-color="#ff9900" @confirm="numberCheck" @cancel="numberPicker=false"></u-picker>
		<u-toast ref="uToast" />

		<!-- <u-image width="100%" height="300rpx" class="hiddenImage" v-for="(item,index) in pictureList" :src="imgUrl+item" :key="index"></u-image> -->
	</view>
</template>

<script>
	import {
		categoryQueryAll,
		flavorQueryAll,
		placeQueryAll,
		getAddMealOrder
	} from '@/api/common.js'
	export default {
		data() {
			return {
				labelStyle:{
					fontSize:'26px'
				},
				btClick:-1,
				btCheck:-1,
				pictureList: [],
				customBtStyle: {
					padding: '15px'
				},
				flavorList: [],
				placeList: [],
				rangeDate: [],
				rangeSelect: [],
				numberRange: [],
				calendar: false,
				numberPicker: false,
				form: {
					date: '',
					time: '',
					num: 0, //就餐人数
					flavor: 0,
					place: 0,
					remark: ''
				},
				dialogShow: false,
				orderDeatil: null,
				imgUrl: '',
				scrollstyle: {
					height: '600rpx'
				},
				leftIconStyle: {
					color: '#2979ff'
				},
				
				
			}
		},
		onLoad() {
			let that = this
			this.imgUrl = getApp().globalData.baseImgurl
			this.dateRangeInit()
			for (let i = 1; i <= 30; i++) {
				this.numberRange.push(i)
			}

			flavorQueryAll().then(res => {
				that.flavorList = res.data
			}).catch(res => {
				console.log(res)
				that.$refs.uToast.show({
					title: '加载失败',
					type: 'error'
				})
			})
			placeQueryAll().then(res => {
				that.placeList = res.data
			}).catch(res => {
				console.log(res)
				that.$refs.uToast.show({
					title: '加载失败',
					type: 'error'
				})
			})

			categoryQueryAll().then(res => {
				getApp().globalData.foodsList = res.data
				getApp().globalData.foodsList[0].loading = true
				// res.data.forEach(item=>{
				// 	item.foods.forEach(item1=>{
				// 		that.pictureList.push(item1.picture)
				// 	})
				// })
			}).catch(res => {
				console.log(res.message)
			})

		},
		onShow() {
			if (getApp().globalData.foodsList.length > 0) {
				getApp().globalData.foodsList.forEach(item => {
					item.loading = false
				})
				getApp().globalData.foodsList[0].loading = true
			}
			getAddMealOrder().then(res => {
				this.orderDeatil = res.data
				this.dialogShow = true
			}).catch(res => {
				console.log(res.message)
			})
		},
		methods: {
			showCalender(check,hours){
				this.rangeSelect = [0, hours, 0]
				this.btClick = check
				this.calendar = true
			},
			numberCheck(e) {
				this.form.num = e[0] + 1
			},
			dateCheck(e) {
				let dayFormat = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

				let date = new Date()

				date.setDate(date.getDate() + e[0])
				date.setHours(e[1])
				date.setMinutes(15 * e[2])

				this.form.date =
					`${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes() === 0 ? '00': date.getMinutes()} ${dayFormat[date.getDay()]}`

				this.btCheck = this.btClick
				this.form.time = date.getTime()
				
			},
			dateRangeInit() {
				let date = new Date()
				let dayFormat = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				// this.form.time = date.getTime()
				// this.form.date =
				// 	`${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()} ${dayFormat[date.getDay()]}`

				let dayArray = []
				let hourArray = []


				for (let i = 0; i < 24; i++) {
					hourArray.push(i + '点')
				}

				for (let i = 0; i < 7; i++) {
					dayArray.push(`${date.getDate()}日-${dayFormat[date.getDay()]}`)
					date.setDate(date.getDate() + 1)
				}

				this.rangeDate.push(dayArray)
				this.rangeDate.push(hourArray)
				this.rangeDate.push(['00分', '15分', '30分', '45分'])
		
			},
			confirm() {

				if (this.form.date === null || this.form.date === '') {
					this.$refs.uToast.show({
						title: '请选择用餐时间',
						type: 'warning'
					})

					return
				}

				if (this.form.num === 0) {
					this.$refs.uToast.show({
						title: '请选择用餐人数',
						type: 'warning'
					})

					return
				}

				if (this.form.place === 0) {
					this.$refs.uToast.show({
						title: '请选择地点',
						type: 'warning'
					})

					return
				}
				if (this.form.flavor === 0) {
					this.$refs.uToast.show({
						title: '请选择口味',
						type: 'warning'
					})
					return
				}

				let detail = this.form

				detail.flavorName = this.flavorList.find(item => {
					return item.id === detail.flavor
				}).flavor

				detail.placeName = this.placeList.find(item => {
					return item.id === detail.place
				}).place
				
				
				let mealType = ['早餐','中餐','晚餐','夜宵']
				
				detail.mealType = mealType[this.btCheck]
				
				uni.navigateTo({
					url: '/pages/menu/menu?addMeal=false&param=' + encodeURIComponent(JSON.stringify(detail))
				})


			},
			addMealMethod(orderDeatil) {

				getApp().globalData.addMealOrderDeatil = orderDeatil
			
				uni.navigateTo({
					url: '/pages/menu/menu?addMeal=true'
				})
				 // this.$route({path: '../order/orderDetail?id=${orderDeatil.id}');

			},
			navigateToDetail(id) {
				uni.navigateTo({
					url: `../order/orderDetail?id=${id}`
				})
			},flavorClick(e){
				this.form.flavor = e
			},placeClick(e){
				this.form.place = e
			}
		},
		onShareAppMessage() {

		}

	}
</script>

<style>
	.card-left {
		width: 33.33%;
	}

	.card-right {
		margin-left: 3%;
		width: 63.66%;
	}

	.card {
		display: flex;
		padding: 5%;

	}


	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin: 4%;
	}

	.hiddenImage {
		width: 200px;
		height: 200px;
		position: fixed;
		display: none;
	}
	.u-size-mini{
		padding: 0 30rpx!important;
		/* font-size: 26rpx!important; */
	}
	.btClick{
		color: white!important;
		background-color: #ff9900!important;
	}
	
	
	/* 	.formRegister >>> .ivu-form-item-label{
	    color: gold;
	  } */
</style>
